<template>

  <el-dialog
    top="20px"
    :title="defaultValue.title"
    :visible="tableConfig.show"
    @close="tableConfig.show = false"
    :show-close="tableConfig.showClose"
    :destroy-on-close="tableConfig.destroyOnClose"
    width="1100px">


    <el-row :gutter="10">
      <el-col :span="4">
        <el-image v-if="formMemberFamily.icoPath != null"
                  fit="contain"
                  :src="formMemberFamily.icoPath"></el-image>
        <el-image v-else
                  fit="contain"
                  :src="require('@/assets/images/avatar/avatar11.png')"></el-image>
      </el-col>

      <el-col :span="20">
        <el-descriptions title="" :column="2" :size="size" >
          <el-descriptions-item label="真实姓名">
            <span v-if="formMemberFamily.userName === 'UNKNOWN_NAME_DEFAULT'" style="color: darkorange">未知姓名</span>
            <span v-else>{{formMemberFamily.userName}}</span>
          </el-descriptions-item>
          <el-descriptions-item label="性别">
            <span v-if="formMemberFamily.sex === 0"><el-tag type="success" :size="mini">女</el-tag></span>
            <span v-else-if="formMemberFamily.sex === 1"><el-tag :size="mini">男</el-tag></span>
            <span v-else>未知</span>
          </el-descriptions-item>
          <el-descriptions-item label="外号/昵称">{{formMemberFamily.nickname}}</el-descriptions-item>
          <el-descriptions-item label="家庭排行"><el-tag type="danger" :size="mini">第{{formMemberFamily.familyRanking}}</el-tag></el-descriptions-item>
          <el-descriptions-item label="手机号码">{{formMemberFamily.phone}}</el-descriptions-item>
          <el-descriptions-item label="身份证">{{formMemberFamily.idCard}}</el-descriptions-item>
          <el-descriptions-item label="出生年月类型">
            <span v-if="formMemberFamily.lunarCalendar === 1"><el-tag type="info" :size="mini">阴历</el-tag></span>
            <span v-else-if="formMemberFamily.lunarCalendar === 2"><el-tag type="danger" :size="mini">阳历</el-tag></span>
            <span v-else>-</span>
          </el-descriptions-item>
          <el-descriptions-item label="出生年月">{{formMemberFamily.birth}}</el-descriptions-item>
          <el-descriptions-item label="生日时间">{{formMemberFamily.birthdayTime}}</el-descriptions-item>
          <el-descriptions-item label="生日提醒时间">
            提前
            <span v-if="formMemberFamily.beforeBirthday" >{{formMemberFamily.beforeBirthday}}</span>
            <span v-else >0</span>
            天
          </el-descriptions-item>
          <el-descriptions-item label="生日提醒">
            <span v-if="formMemberFamily.birthdayTips === 1"><el-tag type="info" :size="mini">未开启</el-tag></span>
            <span v-else-if="formMemberFamily.birthdayTips === 2"><el-tag type="success" :size="mini">开启</el-tag></span>
            <span v-else>-</span>
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-descriptions class="margin-top" title="" :column="3" :size="size" border >

          <el-descriptions-item><template slot="label">关系类型</template><el-tag type="warning" :size="mini">{{formMemberFamily.connectionTypeName}}</el-tag></el-descriptions-item>
          <el-descriptions-item><template slot="label">关系说明</template>{{formMemberFamily.dataExplain}}</el-descriptions-item>
          <el-descriptions-item><template slot="label">我对他的称呼</template>{{formMemberFamily.call}}</el-descriptions-item>
          <el-descriptions-item><template slot="label">父母对他的称呼</template>{{formMemberFamily.callParent}}</el-descriptions-item>
          <el-descriptions-item><template slot="label">子女对它的称呼</template>{{formMemberFamily.callSon}}</el-descriptions-item>

        </el-descriptions>
      </el-col>
    </el-row>

    <el-row style="margin-top: 10px">
      <el-col :span="24">
        <el-descriptions class="margin-top" title="" :column="3" :size="size" border>

          <el-descriptions-item><template slot="label">公司名称</template>{{formMemberFamily.companyName}}</el-descriptions-item>
          <el-descriptions-item><template slot="label">公司地址</template>{{formMemberFamily.companyAddress}}</el-descriptions-item>
          <el-descriptions-item><template slot="label">职业</template>{{formMemberFamily.occupation}}</el-descriptions-item>
          <el-descriptions-item><template slot="label">工作行业</template>{{formMemberFamily.trade}}</el-descriptions-item>
          <el-descriptions-item><template slot="label">车牌</template>{{formMemberFamily.licensePlate}}</el-descriptions-item>
          <el-descriptions-item><template slot="label">最高学历毕业学校</template>{{formMemberFamily.graduationSchool}}</el-descriptions-item>
          <el-descriptions-item><template slot="label">健康情况</template>{{formMemberFamily.health}}</el-descriptions-item>
          <el-descriptions-item><template slot="label">学历</template>{{formMemberFamily.education}}</el-descriptions-item>
          <el-descriptions-item><template slot="label">结婚时间</template>{{formMemberFamily.marryTime}}</el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-alarm-clock"></i>
              数据录入时间
            </template>
            {{getTime(formMemberFamily.createTime)}}
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>


    <el-row style="margin-top: 10px">
      <el-col :span="24">
        <el-descriptions class="margin-top" title="" direction="vertical" :column="3" :size="size" border>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-document"></i>
              外貌特征
            </template>
            {{formMemberFamily.features}}
          </el-descriptions-item>
        </el-descriptions>

      </el-col>
    </el-row>

    <el-row style="">
      <el-col :span="24">
        <el-descriptions class="margin-top" title="" direction="vertical" :column="3" :size="size" border>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-document"></i>
              居住地址
            </template>
            {{formMemberFamily.residentialAddress}}
          </el-descriptions-item>
        </el-descriptions>

      </el-col>
    </el-row>

    <el-row style="">
      <el-col :span="24">
        <el-descriptions class="margin-top" title="" direction="vertical" :column="3" :size="size" border>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-document"></i>
              老家地址
            </template>
            {{formMemberFamily.residentialAddressHometown}}
          </el-descriptions-item>

        </el-descriptions>

      </el-col>
    </el-row>

    <el-row style="">
      <el-col :span="24">
        <el-descriptions class="margin-top" title="" :column="2" :size="size" border>

          <el-descriptions-item>
            <template slot="label">老家经纬度对应地址</template>
            {{formMemberFamily.hometownLongitudeLatitudeText}}
            <el-link v-if="formMemberFamily.hometownLongitudeLatitudeText" type="primary" icon="el-icon-map-location"
                     @click="openMap(formMemberFamily.hometownLongitude, formMemberFamily.hometownLatitude, formMemberFamily.userName + '老家地址')"
                     style="font-size: 12px;">地图</el-link>
          </el-descriptions-item>

        </el-descriptions>

      </el-col>
    </el-row>

    <el-row style="">
      <el-col :span="24">
        <el-descriptions class="margin-top" title="" :size="size" border>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-picture"></i>
              老家照片(点击放大)
            </template>
            <el-image class="images-size" v-if="formMemberFamily.hometownIcoPath != null" fit="contain" :src="formMemberFamily.hometownIcoPath" :preview-src-list="hometownPreview"></el-image>
          </el-descriptions-item>

        </el-descriptions>

      </el-col>
    </el-row>

    <el-row style="">
      <el-col :span="24">
        <el-descriptions class="margin-top" title="" :column="2" :size="size" border>

          <el-descriptions-item><template slot="label">离世时间</template>{{getFullDate(formMemberFamily.deathTime)}}</el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">陵墓经纬度对应地址</template>
            {{formMemberFamily.tombLongitudeLatitudeText}}
            <el-link v-if="formMemberFamily.tombLongitudeLatitudeText" type="primary" icon="el-icon-map-location"
                     @click="openMap(formMemberFamily.tombLongitude, formMemberFamily.tombLatitude, formMemberFamily.userName + '陵墓')"
                     style="font-size: 12px;">地图</el-link>
          </el-descriptions-item>

        </el-descriptions>

      </el-col>
    </el-row>

    <el-row style="">
      <el-col :span="24">
        <el-descriptions class="margin-top" title="" direction="vertical" :column="2" :size="size" border>
          <el-descriptions-item><template slot="label">陵墓说明</template>{{formMemberFamily.tombExplanation}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>

    <el-row style="">
      <el-col :span="24">
        <el-descriptions class="margin-top" title="" :size="size" border>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-picture"></i>
              陵墓照片(点击放大)
            </template>
            <el-image class="images-size" v-if="formMemberFamily.tombIcoPath != null" fit="contain" :src="formMemberFamily.tombIcoPath" :preview-src-list="tombPreview"></el-image>
          </el-descriptions-item>

        </el-descriptions>

      </el-col>
    </el-row>

    <el-row style="">
      <el-col :span="24">
        <el-descriptions class="margin-top" title="" direction="vertical" :column="3" :size="size" border>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-document"></i>
              备注
            </template>
            {{formMemberFamily.remarks}}
          </el-descriptions-item>
        </el-descriptions>

      </el-col>
    </el-row>


    <el-row style="">
      <el-col :span="24">
        <el-descriptions class="margin-top" title="" direction="vertical" :column="3" :size="size" border>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-document"></i>
              用户图片
            </template>

            <!--图片展示部分-->
            <div class="waterfall-div">
              <!--:maxCols="4"-->
              <vue-waterfall-easy
                                  :width="900"
                                  :heigh="350"
                                  linkRange="img"
                                  hrefKey="savePath"
                                  :imgsArr="waterfall.waterfallList"
                                  srcKey="savePath"
                                  @scrollReachBottom="getMemberFamilyPicture">
                <div class="img-info" slot-scope="props">
                  <!--<p class="some-info">{{props.value.id}}</p>-->
                </div>
              </vue-waterfall-easy>
            </div>

          </el-descriptions-item>
        </el-descriptions>

      </el-col>
    </el-row>



    <span slot="footer" class="dialog-footer">
      <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
    </span>

  </el-dialog>

</template>

<script>
  import {getFullDate, getFullTime} from "../../utils/utils";
  import http from '@/utils/http'
  // 瀑布流
  import vueWaterfallEasy from 'vue-waterfall-easy'

  export default {
    // 家庭成员
    name: "MemberFamilyDetailed",
    components: {
      vueWaterfallEasy
    },
    data(){
      return {
        // 默认值，进入页面后的值
        defaultValue: {
          // 弹出框标题
          title: '详情',
        },
        // 表格的默认值
        tableConfig: {
          // 关闭时销毁 Dialog 中的元素
          destroyOnClose: true,
          // 弹出框是否打开
          show: false,
          // 是否显示关闭按钮
          showClose: true,
        },
        // 瀑布流
        waterfall: {
          //存放计算好的数据
          waterfallList: [],
        },
        // 社交用户ID
        memberFamilyId: null,
        // 列表的尺寸
        size: 'small',
        // tag的大小
        mini: 'mini',
        // tag 的大小
        tagSize: 'small',
        // 成员信息
        formMemberFamily: {
          id: null,
          userName: null,
          nickname: null,
          familyRanking: null,
          features: null,
          phone: null,
          idCard: null,
          sex: null,
          lunarCalendar: null,
          birth: null,
          birthdayTime: null,
          beforeBirthday: null,
          birthdayTips: null,
          icoPath: null,
          occupation: null,
          companyName: null,
          companyAddress: null,
          trade: null,
          graduationSchool: null,
          education: null,
          residentialAddress: null,
          residentialAddressHometown: null,
          marryTime: null,
          deathTime: null,
          tombId: null,
          licensePlate: null,
          remarks: null,
          health: null,
          sort: 99,
          // 关系部分
          joinId: null,
          connectionTypeId: null,
          dataExplain: null,
          connectionTypeName: null,
          callParent: null,
          call: null,
          callSon: null,
          // 新增地图部分
          tombExplanation: null,
          tombLongitude: null,
          tombLatitude: null,
          tombLongitudeLatitudeText: null,
          hometownLongitude: null,
          hometownLatitude: null,
          hometownLongitudeLatitudeText: null,
        },
        // 老家图片预览
        hometownPreview: [],
        // 陵墓照片预览
        tombPreview: [],
        // 描述列表的css
        CS: {
          // 'text-align': 'center',  //文本居中
          'min-width': '250px',   //最小宽度
          'word-break': 'break-all'  //过长时自动换行
        },
        // 描述列表的css
        LS: {
          // 'color': '#000',
          // 'text-align': 'center',
          'font-weight': '600',
          // 'height': '40px',
          // 'background-color': 'rgba(255, 97, 2, 0.1)',
          'min-width': '110px',
          'word-break': 'keep-all'
        }
      }
    },
    methods: {
      /**
       * 获取上传的用户照片
       */
      getMemberFamilyPicture(){
        http.post("/user/getMemberFamilyPicture", {
          memberFamilyId: this.memberFamilyId
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.waterfall.waterfallList = this.waterfall.waterfallList.concat(res.data)

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 打开地图
       * @param longitude 经度
       * @param latitude 纬度
       * @param name 标记名称
       */
      openMap(longitude, latitude, name){
        // 地图里面的标记详细参考https://lbs.amap.com/api/uri-api/guide/mobile-web/point
        //   position 表示经纬度，name 是用户自定义的名字，src 这里固定
        window.open("https://uri.amap.com/marker?position=" + longitude+ "," + latitude + "&name=" + name + "&src=mypage&coordinate=gaode&callnative=0")
      },
      /**
       * 打开人员信息详情
       * @param obj 人员信息
       */
      openMemberFamilyDetailed(obj){
        // 防止脏数据
        this.waterfall.waterfallList = []
        this.formMemberFamily = obj
        // 图片预览
        this.hometownPreview = [this.formMemberFamily.hometownIcoPath]
        this.tombPreview = [this.formMemberFamily.tombIcoPath]
        this.tableConfig.show = true
        // 照片
        this.memberFamilyId = obj.id
        this.getMemberFamilyPicture()
        // this.$store.commit('navigationListChange', ['家庭管理', '家庭成员', '详情'])
      },
      /**
       * 转换时间戳为时间格式
       */
      getTime(item){
        return getFullTime(item)
      },
      /**
       * 时间转日期
       * @param item 要转换的时间戳
       * @return {string}
       */
      getFullDate(item){
        return getFullDate(item)
      },
    }
  }
</script>

<style scoped>

  .images-size {
    width: 102px;
    height: 136px
  }

  .waterfall-div{
    width: 900px;
    height: 350px;
  }

</style>
